<template>
    <div class="total">
      <div class="all">
      <div class="top">
        <p>注册账户</p>
      </div>
      <div class="main">
        <el-form  label-width="100px" ref="login" :model="user" :rules="userRules">
        
            <el-form-item prop="name" >
              <div slot="label" class="aa">用&#8194;户&#8194;名</div>
                <el-input type="text" v-model="user.name"  placeholder="请输入用户名"></el-input>
            </el-form-item>
        <el-form-item prop="pass">
              <div slot="label" class="aa">密&#8195;&#8195;码</div>
              <el-input type="password" v-model="user.pass"  placeholder="请输入密码"></el-input>
        </el-form-item>
  
        <el-form-item label="确认密码"  >
              <el-input type="password" v-model="user.passto" placeholder="请再次输入密码"></el-input>
        </el-form-item>
        
        <el-form-item label="兴趣爱好">
          <el-checkbox-group >
            <el-checkbox label="唱歌" name="type"></el-checkbox>
            <el-checkbox label="旅游" name="type"></el-checkbox>
            <el-checkbox label="打球" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>


        <el-form-item label="用户性别">
          <el-radio-group>
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
            <el-form-item label="所在地址">
              <el-select  >
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm">注册</el-button>
            </el-form-item>
  
        </el-form>
      </div>
  </div>
    </div>
  </template>
  
  <script>
  export default {
      data(){
 
          return{
              user:{
                  name:'',
                  pass:'',
              },
              userRules:{
                  name:[{ required: true,  validator:this.nameValidator,trigger:'blur'}],
                  pass:[{required: true, validator:this.passValidator,trigger:'blur'}],
              }
          }
      },
      methods:{
  
        nameValidator(rule,value,cb){
              if(value==""){   
                cb(new Error("用户名不能为空"))
                }else if(value.length<11){
                  cb(new Error("手机号必须为11位"))
                }                                                                                                                                                        
                  cb()
        },
        passValidator(rule,value,cb){
              const reg =  /^[0-9a-zA-Z_]{1,}$/
              console.log(reg.test(value));
              if(value==""){   
                cb(new Error("密码不能为空"))
                }else if(value.length<11){
                  cb(new Error("手机号必须为11位"))
                }                                                                                                                                                        
            cb()
        },
  
        submitForm(){
          
         this.$refs.login.validate((valid)=>{
            if(valid){
        
              this.$message({
                // message:'登陆成功',
                type:'success'
              })
            }else{
              this.$message.error('登陆失败')
              return false;
            }
          })
    
        }
    }
  }
  </script>
  
  
  
  <style scoped>
      .total{
          width: 100%;
          height: 500px;
          background-color: #ccc;;
        }
        .all{
          position: relative;
                  top: 10px;
                  width: 400px;
                  min-height: 400px;
                  background: #fff;
                  border-radius: 8px;
                  margin: auto;
                  padding: 30px 35px 20px;
          
        }
      .top{
        font-family:STKaiti;
        width: 400px;
        margin: auto;
        text-align:center;
        letter-spacing:30px;
   
      }
      .main{
      width: 400px;
      margin: auto;
      }
      .aa{
        float: right;
      }
      .el-button{
        width: 200px;
      margin-left:50px ;
      }
  </style>